<template>
	<view class="changeTypeBox">
		<!-- 选择 -->
		<view class="change" @click="openChangeType">
			<view class="left">
				<view class="title">
					选择
				</view>
				<view class="msg">
					请选择：套餐；颜色；内存；租期
				</view>
			</view>
			<view class="icon">

			</view>
		</view>
		<!-- 配送 -->
		<view class="distribution">
			<view class="title">
				配送
			</view>
			<view class="msg">
				<view class="top">
					顺丰快递 | 归还自付
				</view>
				<view class="bottom">
					<view class="p1">
						顺丰免运费
					</view>
					<view class="p2">
						极速发货
					</view>
					<view class="p3">
						现在下单，最快今天发货
					</view>
				</view>
			</view>
		</view>
		<!-- 参数 -->
		<view class="parameter">
			<view class="left">
				<view class="title">
					参数
				</view>
				<view class="msg">
					苹果 | iPhone14ProMax | 全网通 | 256G12312312
				</view>
			</view>
			<view class="icon">

			</view>
		</view>
		<!-- 配件 -->
		<view class="fittings">
			<view class="title">
				配送
			</view>
			<view class="msg">
				<view class="top">
					<view class="p">
						<view class="p1">
							赠归还
						</view>
						<view class="p2">
							快充数据线*1
						</view>
					</view>
					<view class="icon">

					</view>
				</view>
				<view class="bottom">
					<view class="p1">
						赠品
					</view>
					<view class="p2">
						壳膜包（保护壳、钢化膜）*1 | iCl ...11231231
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="changeTypeShow" @close="typeClose" @open="typeOpen" :round="30" :closeable="true">
			<view class="changeTypePopup">
				<view class="main">
					<view class="box">
						<view class="header">
							<view class="img"
								:style="{ backgroundImage: 'url(https://api.jingkakeji.com/' + detailsMsg.images[0] + ')' }">

							</view>
							<view class="right">
								<view class="model">
									{{model}}
								</view>
								<view class="price">
									￥<span>{{rent}}</span>/天
								</view>
								<view class="change">
									请选择：颜色；内存；租期
								</view>
							</view>
						</view>
						<view class="boxc" v-for="(item, index) in changeTypeData" :key="index">
							<view class="title">
								{{ item.name }}
							</view>
							<view class="list">
								<view v-if="item.name == '机型'" :class="indexs == modelIndex ? 'active item' : 'item'"
									v-for="(items, indexs) in item.value" :key="indexs"
									@click="modelClick(items, indexs)">
									{{ items }}
								</view>
								<view v-if="item.name == '颜色'" :class="indexs == colorIndex ? 'active item' : 'item'"
									v-for="(items, indexs) in item.value" :key="indexs"
									@click="colorClick(items, indexs)">
									{{ items }}
								</view>
								<view v-if="item.name == '存储容量'"
									:class="indexs == storageIndex ? 'active item' : 'item'"
									v-for="(items, indexs) in item.value" :key="indexs"
									@click="storageClick(items, indexs)">
									{{ items }}
								</view>
							</view>
						</view>
						<!-- 	<view class="boxc">
							<view class="title">
								租赁方案
							</view>
							<view class="list">
								<view :class="index == schemeIndex ? 'active item' : 'item'"
									v-for="(item, index) in schemeData" :key="index" @click="schemeClick(item, index)">
									{{ item.text }}
								</view>
							</view>
							<view class="tip">
								<span>须知：</span>租期内，请按时支付每期租金，或您可随时买断商品，获得商品所有权；如未买断，到期后您应按时归还；
							</view>
						</view> -->
						<view class="boxc">
							<view class="title">
								租期
							</view>
							<view class="list">
								<view :class="index == leaseIndex ? 'active item' : 'item'"
									v-for="(item, index) in leaseData" :key="index" @click="leaseClick(item, index)">
									{{ item.days }}天
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="btn" @click="confirm">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		Submission,
		generate
	} from "../../api/api.js"
	export default {
		props: ["detailsMsg", "orderNeedId"],
		data() {
			return {
				changeTypeShow: false,
				changeTypeData: [],
				//机型
				model: "",
				modelIndex: 0,
				//颜色
				color: "",
				colorIndex: 0,
				//存储容量
				storage: "",
				storageIndex: 0,
				//租赁方案
				schemeData: [{
						id: 1,
						text: "租完可归还/买断"
					},
					{
						id: 2,
						text: "随租随还"
					}
				],
				scheme: "",
				schemeIndex: 0,
				//租期
				lease: "",
				leaseId: "",
				leaseIndex: 0,
				leaseData: [],
				//用于查询套餐的数据
				skuList: [],
				// 租金价格
				maxPrice: 0,
				minPrice: 0,
				rent: 0
			}
		},
		mounted() {},
		methods: {
			// 打开套餐选择
			openChangeType() {
				this.typeOpen()
				this.changeTypeData = this.detailsMsg.spec_data.specList
				//默认租赁天数
				this.leaseId = this.detailsMsg.meals[0].id
				this.leaseData = this.detailsMsg.meals
				this.leaseClick(this.leaseData[0], this.leaseIndex)
				//用于查询套餐的数据
				this.skuList = this.detailsMsg.spec_data.skuList
				//默认机型·颜色·存储
				if (this.changeTypeData.length == 2) {
					this.colorClick(this.changeTypeData[0]?.value[this.colorIndex], this.colorIndex)
					this.storageClick(this.changeTypeData[1]?.value[this.storageIndex], this.storageIndex)
					this.getRent("", this.color, this.storage)
				}
				if (this.changeTypeData.length == 3) {
					this.modelClick(this.changeTypeData[0]?.value[this.colorIndex], this.modelIndex)
					this.colorClick(this.changeTypeData[1]?.value[this.colorIndex], this.colorIndex)
					this.storageClick(this.changeTypeData[2]?.value[this.storageIndex], this.storageIndex)
					this.getRent(this.model, this.color, this.storage)
				}
			},
			//关闭套餐选择
			typeClose() {
				this.changeTypeShow = false
			},
			//开启套餐选择
			typeOpen() {
				this.changeTypeShow = true
			},
			//选择机型
			modelClick(item, index) {
				this.modelIndex = index
				console.log(item, "机型下标")
				this.model = item
				this.getRent(this.model, this.color, this.storage)
			},
			//选择颜色
			colorClick(item, index) {
				console.log(item, "机型颜色")
				this.colorIndex = index
				this.color = item
				this.getRent(this.model, this.color, this.storage)
			},
			//选择存储容量
			storageClick(item, index) {
				console.log(item, "存储容量")
				this.storageIndex = index
				this.storage = item
				this.getRent(this.model, this.color, this.storage)
			},
			//选择租赁方案
			schemeClick(item, index) {
				this.schemeIndex = index
				this.scheme = item.text
			},
			// 选择租期
			leaseClick(item, index) {
				this.lease = item.days
				this.leaseIndex = index
				this.day = parseInt(item.days / 30)
				this.leaseId = item.id
				this.getRent(this.model, this.color, this.storage)
			},
			//预生成订单
			async ApiSubmission(shop, goods, sku, address, meal, coupons) {
				let data = {
					//店铺id
					shops_id: shop,
					// 商品id
					goods_products_id: goods,
					//skuId
					goods_sku_id: sku,
					// 用户地址id
					user_address_id: address,
					//租赁套餐id
					meal_id: meal,
					//卡券id
					coupons_id: coupons
				}
				console.log('接口接收ID', data);
				uni.setStorageSync('ids', JSON.stringify(data))
				let res = await Submission(data)
				console.log('预生成订单', res.data.data);
				uni.setStorageSync('submissionData', JSON.stringify(res.data.data))
				if (res.data.code == 1) {
					uni.navigateTo({
						url: `/pages/mys/details/details`
					})
				}
			},
			//确认
			confirm() {
				const isOrganic = this.model !== ""; // 判断是否有机型
				let spec;
				if (isOrganic) {
					spec = `机型:${this.model};颜色:${this.color};存储容量:${this.storage}`;
				} else {
					spec = `颜色:${this.color};存储容量:${this.storage}`;
				}
				// console.log('选择的套餐', spec);
				const findSpec = this.skuList.find(item => item.spec === spec);
				// console.log(findSpec, '查询的套餐结果');
				console.log('商品id', this.detailsMsg.id);
				console.log('套餐id', findSpec.id);
				console.log('地址id', this.orderNeedId.addressId);
				console.log('分期id', this.leaseId);
				this.ApiSubmission(1, this.detailsMsg.id, findSpec.id, this.orderNeedId.addressId, this.leaseId, 0);
			},
			//获取租金价格
			getRent(model, color, storage) {
				const isOrganic = model !== ""; // 判断是否有机型
				let spec;
				if (isOrganic) {
					spec = `机型:${model};颜色:${color};存储容量:${storage}`;
				} else {
					spec = `颜色:${color};存储容量:${storage}`;
				}
				const findSpec = this.skuList.find(item => item.spec === spec);
				const leaseTerm = findSpec?.tenure_months[Math.floor(this.lease / 30)];
				// console.log(leaseTerm, '查询获取租金的套餐结果');
				if (leaseTerm) {
					this.rent = leaseTerm.every_day
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.changeTypeBox {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.changeTypePopup {
			width: 100%;
			height: 80vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 20rpx;

			.main {
				width: 100%;
				height: 90%;
				overflow-y: scroll;

				.box {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.header {
						width: 90%;
						height: 300rpx;
						border-bottom: 1px solid #EEEEEE;
						display: flex;
						align-items: center;

						.img {
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
							border: 1px solid #ccc;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}

						.right {
							width: 500rpx;
							margin-left: 20rpx;

							.model {
								font-weight: bold;
								font-size: 34rpx;
							}

							.price {
								color: #F26662;
								font-size: 30rpx;
								font-weight: bold;
								margin-top: 20rpx;

								>span {
									font-size: 38rpx;
								}
							}

							.change {
								color: #999999;
								font-size: 24rpx;
							}
						}
					}

					.boxc {
						width: 90%;
						margin-bottom: 20rpx;

						.title {
							font-weight: bold;
							font-size: 32rpx;
							margin-top: 30rpx;
						}

						.list {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.item {
								height: 60rpx;
								line-height: 60rpx;
								border-radius: 40rpx;
								background-color: #f6f6f6;
								padding: 0px 30rpx;
								margin-top: 30rpx;
								margin-right: 30rpx;
							}

							.active {
								background-color: #FCD748;
							}
						}

						.tip {
							font-size: 24rpx;
							color: #999999;
							margin-top: 30rpx;
							line-height: 40rpx;

							>span {
								color: black;
								font-weight: bold;
							}
						}
					}
				}
			}

			.bottom {
				width: 90%;
				height: 200rpx;
				border-top: 1px solid #EEEEEE;

				.btn {
					width: 100%;
					height: 100rpx;
					background-color: #FCD748;
					text-align: center;
					line-height: 100rpx;
					border-radius: 50rpx;
					font-size: 32rpx;
					margin-top: 70rpx;
				}
			}
		}

		.change {
			width: 95%;
			height: 80rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 630rpx;

				display: flex;
				align-items: center;


				.title {
					width: 80rpx;
					font-size: 30rpx;
					color: #999999;
				}

				.msg {
					width: 550rpx;
					font-size: 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				background-image: url("/static/detail/right_ccc.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.distribution {
			width: 95%;
			height: 180rpx;
			margin-top: 10rpx;
			display: flex;

			.title {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #999999;
			}

			.msg {
				width: 600rpx;
				height: 100%;

				.top {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
				}

				.bottom {
					width: 100%;
					height: 80rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.p1 {
						width: 130rpx;
						height: 45rpx;
						line-height: 43rpx;
						text-align: center;
						font-size: 24rpx;
						background-color: black;
						color: white;
						border-radius: 10rpx;
					}

					.p2 {
						width: 100rpx;
						height: 45rpx;
						line-height: 43rpx;
						text-align: center;
						font-size: 24rpx;
						background-color: #FCD748;
						color: black;
						border-radius: 10rpx;
						margin-left: 10rpx;
					}

					.p3 {
						width: 350rpx;
						font-size: 30rpx;
						margin-left: 10rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}
				}
			}
		}

		.parameter {
			width: 95%;
			height: 80rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 630rpx;

				display: flex;
				align-items: center;


				.title {
					width: 80rpx;
					font-size: 30rpx;
					color: #999999;
				}

				.msg {
					width: 550rpx;
					font-size: 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				background-image: url("/static/detail/right_ccc.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.fittings {
			width: 95%;
			height: 150rpx;
			margin-top: 10rpx;
			display: flex;

			.title {
				width: 80rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #999999;
			}

			.msg {
				width: 600rpx;
				height: 100%;

				.top {
					width: 100%;
					height: 60rpx;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.p {
						display: flex;
						align-items: center;

						.p1 {
							width: 90rpx;
							height: 45rpx;
							text-align: center;
							line-height: 43rpx;
							border-radius: 10rpx;
							background-color: rgba(125, 226, 123, 0.3);
							color: rgba(125, 226, 123, 1.00);
							font-size: 24rpx;
						}

						.p2 {
							margin-left: 10rpx;
							font-size: 30rpx;
						}
					}

					.icon {
						width: 30rpx;
						height: 30rpx;
						background-image: url("/static/detail/right_ccc.png");
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}

				}

				.bottom {
					width: 100%;
					height: 60rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.p1 {
						width: 70rpx;
						height: 45rpx;
						line-height: 43rpx;
						text-align: center;
						font-size: 24rpx;
						background-color: rgba(242, 102, 98, 0.3);
						color: rgba(242, 102, 98, 1.00);
						border-radius: 10rpx;
					}

					.p2 {
						width: 500rpx;
						margin-left: 10rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>